{% extends "base.html" %}
{% import "bootstrap/wtf.html" as wtf %}
{% import "_macros.html" as macros %}

{% block title %}语音识别模型基准测试系统{% endblock %}

{% block page_content %}
<div class="page-header">
    <p>基准测试任务：<a href="{{ url_for('.btt',id=bt_exec.bttask_id) }}">{{ bttask_name }}</a></p>
    <p>测试任务类型：{{ bttask_type }}</p>
    <p>运行历史名称：{{ bt_exec.name }}</p>
    <p>备注：<span id="note_span">{{ bt_exec.note }}</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span id="add_note_button_span"><a href="javascript:void(0);" onclick="show_finish_add_note({{ bt_exec.id }})"><button>添加备注</button></a></span><span id="show_finish_add_note_span"></span></p>
    <p>状态：{{ status_list[bt_exec.result_status] }}</p>
    <p>开始时间：{{ bt_exec.start_time }}</p>
    <p>结束时间：{{ bt_exec.end_time }}</p>
    <p>celery任务id：{{ bt_exec.celery_task_id }}</p>
    <p>在基准测试任务队列中的id：{{ bt_exec.exec_id }}</p>
    <p>提示项：{{ bt_exec.tip }}</p>
    <p><a href="{{ url_for('.bttask_log',btexec_id=bt_exec.id) }}">查看测试任务日志</a></p>
    <p><a href="{{ url_for('.get_measure_tags',measurement=bt_exec.name) }}">查看InfluxDB表数据</a></p>
    <a class="btn btn-default" href="{{ url_for('.btexec_delete',id=bt_exec.id) }}">删除该运行历史记录</a><label>也会删掉InfluxDB表数据</label><br>
    <p>{% for i in range(influxdb_metric_fields|length) %} 
        {% if influxdb_metric_fields[i]=='train_duration' %}<a class="btn btn-default" href="javascript:void(0)" onclick="load_records('train_duration','{{ test_scenario }}',{{ bt_exec.id }})" id="train_duration">训练时长</a>
        {% elif influxdb_metric_fields[i]=='val_accuracy' %}<a class="btn btn-default" href="javascript:void(0)" onclick="load_records('val_accuracy','{{ test_scenario }}',{{ bt_exec.id }})" id="val_accuracy">验证准确率</a>
        {% elif influxdb_metric_fields[i]=='accuracy' %}<a class="btn btn-default" href="javascript:void(0)" onclick="load_records('accuracy','{{ test_scenario }}',{{ bt_exec.id }})" id="accuracy">准确率</a>
        {% elif influxdb_metric_fields[i]=='model_infer_latency' %}<a class="btn btn-default" href="javascript:void(0)" onclick="load_records('model_infer_latency','{{ test_scenario }}',{{ bt_exec.id }})" id="model_infer_latency">模型推理延迟</a>
        {% elif influxdb_metric_fields[i]=='server_infer_latency' %}<a class="btn btn-default" href="javascript:void(0)" onclick="load_records('server_infer_latency','{{ test_scenario }}',{{ bt_exec.id }})" id="server_infer_latency">服务端推理延迟</a>
        {% elif influxdb_metric_fields[i]=='e2e_latency' %}<a class="btn btn-default" href="javascript:void(0)" onclick="load_records('e2e_latency','{{ test_scenario }}',{{ bt_exec.id }})" id="e2e_latency">端到端延迟</a>
        {% elif influxdb_metric_fields[i]=='throughput' %}<a class="btn btn-default" href="javascript:void(0)" onclick="load_records('throughput','{{ test_scenario }}',{{ bt_exec.id }})" id="throughput">预计吞吐量</a>
        {% elif influxdb_metric_fields[i]=='gpu_utility' %}<a class="btn btn-default" href="javascript:void(0)" onclick="load_records('gpu_utility','{{ test_scenario }}',{{ bt_exec.id }})" id="gpu_utility">GPU利用率</a>
        {% elif influxdb_metric_fields[i]=='gpu_memory_utility' %}<a class="btn btn-default" href="javascript:void(0)" onclick="load_records('gpu_memory_utility','{{ test_scenario }}',{{ bt_exec.id }})" id="gpu_memory_utility">显存利用率</a>
        {% elif influxdb_metric_fields[i]=='used_memory' %}<a class="btn btn-default" href="javascript:void(0)" onclick="load_records('used_memory','{{ test_scenario }}',{{ bt_exec.id }})" id="used_memory">显存使用量</a>
        {% elif influxdb_metric_fields[i]=='gpu_temperature' %}<a class="btn btn-default" href="javascript:void(0)" onclick="load_records('gpu_temperature','{{ test_scenario }}',{{ bt_exec.id }})" id="gpu_temperature">GPU温度</a>
        {% elif influxdb_metric_fields[i]=='gpu_power' %}<a class="btn btn-default" href="javascript:void(0)" onclick="load_records('gpu_power','{{ test_scenario }}',{{ bt_exec.id }})" id="gpu_power">GPU功率</a>
        {% elif influxdb_metric_fields[i]=='gpu_clock_frequency' %}<a class="btn btn-default" href="javascript:void(0)" onclick="load_records('gpu_clock_frequency','{{ test_scenario }}',{{ bt_exec.id }})" id="gpu_clock_frequency">GPU时钟频率</a>
        {% elif influxdb_metric_fields[i]=='cpu_utility' %}<a class="btn btn-default" href="javascript:void(0)" onclick="load_records('cpu_utility','{{ test_scenario }}',{{ bt_exec.id }})" id="cpu_utility">CPU利用率</a>
        {% elif influxdb_metric_fields[i]=='memory_usage' %}<a class="btn btn-default" href="javascript:void(0)" onclick="load_records('memory_usage','{{ test_scenario }}',{{ bt_exec.id }})" id="memory_usage">内存使用量</a>
        {% endif %}
    {% endfor %}
    {% if has_throughput %}{% if '推理' in bttask_type %}<a class="btn btn-default" href="javascript:void(0)" onclick="load_records('actual_tp','{{ test_scenario }}',{{ bt_exec.id }},{{ bttask_batch_size }})">实际吞吐量</a>{% else %}<a class="btn btn-default" href="javascript:void(0)" onclick="load_records('actual_tp','{{ test_scenario }}',{{ bt_exec.id }},{{ bttask_batch_size*bttask_checkpoint_iters }})">实际吞吐量</a>{% endif %}{% endif %}
    </p>
    <div class="row" id="row_div">
    {% if records|length %}
        <table class="table" id="record_table">
            <thead>
                <tr>
                    <th></th>
                    <th>{{ metric_name }}指标的采集时间</th>
                    <th>{{ metric_name }}指标值</th>
                </tr>
            </thead>
            <tbody>
                {% for i in range(records|length) %}
                <tr>
                    <td>{{ i+1 }}</td>
                    <td>{{ (records[i]['_time']+timedt).strftime('%Y-%m-%d %H:%M:%S') }}</td>
                    <td>{{ records[i]['_value'] }}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    {% else %}
    <p>没有采集到该指标的变化值</p>
    {% endif %}
    </div>
</div>
<script type="text/javascript">
    {% if influxdb_metric_fields|length %}
    window.onload=function(){
        $('#{{ influxdb_metric_fields[0] }}').attr('style','background-color:red;');
    }
    {% endif %}
    function load_records(metric_name,test_scenario,btexec_id,batch_size=1){
        $.getJSON('/load_records/'+metric_name+'?test_scenario='+test_scenario+'&btexec_id='+btexec_id+'&batch_size='+batch_size,function(data){
            console.log(data);
            records=data['data'];
            if(records.length==0){
                $('#row_div').html('<p>没有采集到该指标的变化值</p>');
            }else{
                new_record_table='<table class="table" id="record_table">\n<thead>\n<tr>\n<th></th><th>'+data['metric_name']+'指标的采集时间</th>\n<th>'+data['metric_name']+'指标值</th>\n</tr>\n</thead>\n<tbody>\n';
                for(let i=0;i<records.length;i++){
                    new_record_table+='<tr>\n<td>'+(i+1).toString()+'</td>\n<td>'+records[i]['time']+'</td>\n<td>'+records[i]['value']+'</td>\n</tr>'
                }
                new_record_table+='</tbody>\n</table>';
                console.log(new_record_table);
                $('#row_div').html(new_record_table);
            }
        });
        metric_ids=['train_duration','val_accuracy','accuracy','model_infer_latency','server_infer_latency','e2e_latency','throughput','gpu_utility','gpu_memory_utility','used_memory','gpu_temperature','gpu_power','gpu_clock_frequency','cpu_utility','memory_usage','actual_tp'];
        for(let i=0;i<metric_ids.length;i++){
            $('#'+metric_ids[i]).removeAttr('style');
        }
        $('#'+metric_name).attr('style','background-color:red;');
    }

    function show_finish_add_note(btexec_id){
        $('#add_note_button_span').html('');
        $('#show_finish_add_note_span').html('<input id="note_input" style="width:200px;" value="'+$('#note_span').text()+'"><a href="javascript:void(0)" onclick="add_note('+btexec_id+')"><button>完成</button></a>');
    }

    function add_note(btexec_id){
        $.ajax({
            type:'GET',
            url:'/add_btexec_note?note='+$('#note_input').val()+'&btexec_id='+btexec_id,
            success:function(data,status,request){
                $('#note_span').html($('#note_input').val());
            },
            error:function(){
                alert('请求添加任务执行记录的备注的过程中出现错误');
            }
        });
        $('#add_note_button_span').html('<a href="javascript:void(0)" onclick="show_finish_add_note('+btexec_id+')"><button>添加备注</button></a>');
        $('#show_finish_add_note_span').html('');
    }
</script>
{% endblock %}